﻿<html>
<meta charset="utf-8">
<head>
<title>定位</title>
<link href="css/map_tool.css" rel="stylesheet" type="text/css">
<link href="css/common.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.js"></script>
<script src="js/jquery.easydrag.js"></script>
<script src="js/common.js"></script>
<script type="text/javascript" src="js/entry_control.js"></script>
<script type="text/javascript" src="js/ArrayList.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script>
	cur_area = {
		id : 2,
		name : '422区',
		x : 0,
		y : 0
	};
	$(document).ready(
			function() {
				var info = $("#traffic_info");
				var mark = $("#mark");
				min_left = parseInt(info.css("left").split("p")[0]);
				min_top = parseInt(info.css("top").split("p")[0]);
				max_left = info.width() + min_left - mark.width();
				max_top = info.height() + min_top - mark.height();
				mark.easydrag();
				mark.ondrag(function(e) {
					//限制拖拽范围
					var cur = mark;
					var top = cur.offset().top;
					var left = cur.offset().left;
					var relocate = false;
					if (top < min_top) {
						cur.css("top", min_top);
						relocate = true;
					}
					if (left < min_left) {
						cur.css("left", min_left);
						relocate = true;
					}
					if (top > max_top) {
						cur.css("top", max_top);
						relocate = true;
					}
					if (left > max_left) {
						cur.css("left", max_left);
						relocate = true;
					}
					if (!relocate) {
						var ref_left = left - min_left;
						var ref_top = top - min_top;
						var map = $("#traffic_map");
						map.find("img").css({
							top : -(ref_top * 10),
							left : -(ref_left * 10)
						});
						cur.html((map.offset().left + ref_left * 10) + ","
								+ (map.offset().top + ref_top * 10));
						LEFT=map.offset().left + ref_left * 10;
						TOP=map.offset().top + ref_top * 10;
					}
					relocate = false;
				})
				mark.ondrop(function() {
					//调整大图
					var cur = mark;
					var top = cur.offset().top;
					var left = cur.offset().left;
					var ref_left = left - min_left;
					var ref_top = top - min_top;
					var map = $("#traffic_map");
					map.find("img").css({
						top : -(ref_top * 10),
						left : -(ref_left * 10)
					});
					mark.html((map.offset().left + ref_left * 10) + ","
							+ (map.offset().top + ref_top * 10));
				});
			});
</script>
<script type="text/javascript">
	var cur_tool = getUrlParam("tool");
	switch (cur_tool) {
	case 'mapEditor':
		//当窗口加载实例化实体控制器
		window.onload = function() {
			$(".entry_controller").remove();
			$("#toolbar").html("");
			$("#toolbar")
					.append(
							"<p class='title'>工具栏</p>"
									+ "<p>"
									+ "	<input type='radio' name='tools' value='construct_key_point'"+
				"		id='construct_key_point' checked='checked' /><label"+
				"		for='construct_key_point'>构建道路关键点</label>"
									+ "</p>"
									+ "<p>"
									+ "	<input type='radio' name='tools' value='construct_road'"+
				"		id='construct_road' /><label for='construct_road'>构建道路</label>"
									+ "</p>"
									+ "<p>"
									+ "	<input type='radio' name='tools' value='construct_other_entry'"+
				"		id='construct_other_entry' /><label for='construct_other_entry'>构建其他实体</label>"
									+ "</p>"
									+ "<p class='title' id='option_title'>更多选项</p>"
									+ "<div id='tool_options' class='options'></div>"
									+ "<p>"
									+ "	<input type='button' value='提交所有道路信息' id='submit_all' />"
									+ "</p>");
			controller = $('#traffic_map');

			entry_ctrl = new Entry_Controller('#traffic_map', {
				hello : 'helloKitty'
			});
			// 初始化路径（数据库已存在路径）
			entry_ctrl.query_exist_roads(HOST + "query_roads_by_area", 'area='
					+ cur_area.id);

			// 添加事件
			controller.click(function(e) {
				if (deleting) {
					deleting = false;
					return;
				}
				var loc = new Location(e);
				entry_ctrl.locations[getProperId('kp_', 0)] = loc;
				entry_ctrl.addEntry(currentOperation, loc, controller,
						entry_ctrl.locations.length - 1);
			});

			// 选择工具
			$("p [name='tools']").click(function() {
				entry_ctrl.detect_toolbar_operation($(this));
			});

			entry_ctrl.detect_toolbar_operation($(":radio:checked"));

			$("#submit_all").click(
					function() {
						if (roads.cur == -1 || roads.size() == 0)
							return;
						var roads_json = {};
						roads_json = new Array(roads.size());
						for ( var i = 0; i < roads.size(); i++) {
							if (roads.get(i).locs.size() == 0)
								return;
							roads_json[i] = roads.get(i).toJSON();
						}
						ajax_post(HOST + "upload_points_info", 'roads='
								+ JSON.stringify(roads_json), function(msg) {
							if (!msg) {
								var json = eval("(" + msg + ")");
								entry_ctrl.update_current_road_by_json(json);
							}
						});
					});
		};

		// 当窗口大小改变纠正实体位置
		window.onresize = function() {
			var kps = $("div [id^='kp']");
			for (kp_index in kps) {
				var kp = kps.eq(kp_index);
				kp
						.css({
							position : "absolute",
							'top' : (parseInt(kp.attr("y"))
									+ controller.offset().top - Math.floor(kp
									.width() / 2)),
							'left' : (parseInt(kp.attr("x"))
									+ controller.offset().left - Math.floor(kp
									.height() / 2)),
							'z-index' : 3
						});
			}
		};

		window.onbeforeunload = function() {
			return "您正在关闭窗口,请确认数据已保存";
		};
		break;
	}
</script>
</head>
<body>
	<div id="traffic_map"
		style="position: absolute; width: 800px; height: 600px; border: solid 1px #ccc; left: 0px; top: 0px; overflow: hidden;">
		<img src="css/images/map2.png" style="position: absolute;" />
	</div>
	<div id="traffic_info"
		style="position: absolute; left: 810px; top: 0px; width: 260px; height: 200px; border: solid 1px #ccc;">
		<img src="css/images/map2.png" style="width: 260px; height: 200px;" />
	</div>
	<div id="toolbar" 
		style="position: absolute; left: 810px; top: 200px; width: 260px; border: solid 1px #ccc;"></div>
	<div id="mark"
		style="position: absolute; left: 810px; top: 0px; width: 80px; height: 60px; opacity: 0.4; background-color: green; border: solid 1px green; z-index: 1000;"></div>
	<div class="key_point" id="sample_key_point" style="display: none;"></div>
</body>
</html>